<template>
	<div v-show="!!bannerList.length" class="swiper">
		<div class="swiper-container">
			<div :style="{ 'width': bannerContainerWidth }" class="swiper-wrapper">
				<a v-for="item in bannerList" @click="item.bannerClick(item)" class="swiper-slide">
					<img :src="item.bannerImg" :alt="item.bannerTitle" class="swiper-image">
				</a>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
	import Swiper from 'swiper';

	export default {
		'name': 'component-banner',
		'props': [
			'list'
		],
		data() {
			return {};
		},
		'computed': {
			bannerList() {
				return this.list;
			},
			bannerContainerWidth() {
				let additionalBannerNum = 2;
				let hundred = 100;
				return `${this.$multiply(this.$plus(this.bannerList.length || -additionalBannerNum, additionalBannerNum), hundred)}%`;
			}
		},
		'watch': {
			bannerList() {
				if (this.bannerList.length) {
					this.$nextTick(this.generateSwiper);
				}
			}
		},
		'methods': {
			generateSwiper() {
				let vm = this;
				new Swiper('.swiper-container', {
					'loop': true,
					'autoplay': {
						'delay': 3000,
						'disableOnInteraction': false
					},
					'pagination': {
						'el': '.swiper-pagination'
					},
					'on': {
						init() {
							this.slides.eq(0).on('click', () => {
								vm.bannerList[vm.bannerList.length - 1].bannerClick(vm.bannerList[vm.bannerList.length - 1]);
							});
							this.slides.eq(this.slides.length - 1).on('click', () => {
								vm.bannerList[0].bannerClick(vm.bannerList[0]);
							});
						}
					}
				});
			}
		},
		created() {
			if (this.bannerList.length) {
				this.$nextTick(this.generateSwiper);
			}
		}
	};
</script>

<style scoped type="text/scss">
	.swiper {
		position: relative;
		&::after {
			content: "";
			display: block;
			padding-top: 32%;
		}
		.swiper-container {
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
		.swiper-wrapper {
			height: 100%;
		}
		.swiper-slide {
			float: left;
			height: 100%;
		}
		.swiper-image {
			display: block;
			width: 100%;
		}
		.swiper-pagination {
			position: absolute;
			bottom: 3%;
			left: 0;
			width: 100%;
			text-align: center;
		}
	}
</style>
